<template>
	<view class="content h-100v">
		<view class="logo">
			<view class="animationRadio" :style="{ width: radioSize + '%', height: radioSize + '%', opacity: 68 / radioSize - 0.06 }"></view>
		</view>
		<view class="loginBtns">
			<view class="loginBtn" @click="jumpToPhoneLogin">手机号登陆</view>
			<view class="loginBtn" @click="jumpToExperience">立即体验</view>
			<view class="radios" :animation="animationData">
				<radio color="rgb(6, 116, 123)" :checked="agreeRadio" @click="agreeRadio = !agreeRadio"></radio>
				<text @click="jumpToAgreement(item.from, item.title)" v-for="(item, index) in agreements" :key="index">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioSize: 100,
				agreeRadio: false,
				animationData: {},
				agreements: [{
						text: '同意'
					},
					{
						text: '《用户协议》',
						from: 'userAgreement',
						title: 'noteMusic服务条款'
					},
					{
						text: '《隐私政策》',
						from: 'privacyPolicy',
						title: 'noteMusic隐私政策'
					},
					{
						text: '《儿童隐私政策》',
						from: "children'sPrivacyPolicy",
						title: 'noteMusic儿童个人信息保护规则及监护人须知'
					}
				]
			};
		},
		onLoad() {
			let timer = setInterval(() => {
				this.radioSize += 2;
				if (this.radioSize > 600) {
					this.radioSize = 100;
				}
			}, 16);

			this.animation = {};
			this.animation = uni.createAnimation({
				duration: 80,
				timingFunction: 'linear'
			});
		},
		methods: {
			jumpToPhoneLogin() {
				if (this.agreeRadio) {
					uni.navigateTo({
						url: '/pages/login/mobilephoneLogin/mobilephoneLogin'
					})
				} else {
					this.translateAnimation();
					this.showToast();
				}
			},
			jumpToExperience() {
				if (this.agreeRadio) {
					uni.setStorageSync("immission", true)
					uni.reLaunch({
						url: "/pages/main/main"
					})
				} else {
					this.translateAnimation();
					this.showToast();
				}
			},
			translateAnimation() {
				this.animation.translateX(-6).step();
				this.animation.translateX(6).step();
				this.animation.translateX(-6).step();
				this.animation.translateX(6).step();
				this.animation.translateX(-6).step();
				this.animation.translateX(6).step();
				this.animation.translateX(0).step();
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.animation.rotate(0).step();
					this.animationData = this.animation.export();
				}, 80);
			},
			jumpToAgreement(from, title) {
				if (from) {
					uni.navigateTo({
						url: `/pages/login/aggrement/index?from=${from}&title=${title}`
					});
				} else {
					this.agreeRadio = !this.agreeRadio;
				}
			},
			showToast() {
				uni.showToast({
					title: '请勾选《用户协议》《隐私政策》《儿童隐私政策》',
					icon: 'none'
				});
			}
		}
	};
</script>

<style lang="scss">
	.content {
		background-color: $primary;
		height: 100vh;
		position: relative;

		.logo {
			background-image: url(../../static/init/radioLogo.png);
			background-size: contain;
			background-repeat: no-repeat;
			border-radius: 50%;
			width: 110rpx;
			height: 110rpx;
			position: absolute;
			top: 17%;
			left: 50%;
			transform: translateX(-50%);

			.animationRadio {
				position: absolute;
				width: 110rpx;
				height: 110rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				box-shadow: 0 0 3px #fff;
			}
		}

		.loginBtns {
			width: 76%;
			position: absolute;
			bottom: 18px;
			left: 50%;
			transform: translateX(-50%);

			>.loginBtn {
				height: 45px;
				line-height: 45px;
				font-size: 16px;
				border-radius: 22.5px;
				background-color: white;
				text-align: center;

				&:first-child {
					margin-bottom: 16px;
					color: $primary;
				}

				&:nth-child(2) {
					background-color: $primary;
					color: white;
					border: rgba(#dedede, 0.5) 1px solid;
					box-sizing: border-box;
				}

				&:active {
					background-color: rgba(#dedede, 0.5);
				}
			}

			.radios {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 8px;
				margin-top: 48px;
				margin-bottom: 14px;

				>radio {
					transform: scale(0.5) translateY(5%);
				}

				text {
					color: white;
					flex-shrink: 0;
				}

				text:first-of-type {
					color: #ccc;
					transform: translateX(-30%);
				}
			}
		}
	}
</style>
